<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true">
        <el-form-item label="部门名称">
          <el-input v-model="listQuery.name" clearable class="filter-item" placeholder="部门名称"/>
        </el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">查找</el-button>
        <el-button
          v-hasPermi="['admin:sys:dept:create']"
          class="filter-item"
          style="float:right"
          type="primary"
          icon="el-icon-plus"
          @click="startAdd">添加</el-button>
      </el-form>
    </div>

    <!-- 查询结果 -->
    <el-table
      :data="list"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      border
      default-expand-all>
      <el-table-column align="left" prop="name" label="部门名称"/>
      <el-table-column align="center" prop="sequence" label="排序"/>
      <el-table-column align="center" prop="dataStatus" label="状态">
        <template slot-scope="{row}">
          <el-tag v-if="row.dataStatus===1">启用</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间"/>
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <el-button
            v-hasPermi="['admin:sys:dept:update']"
            size="small"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(row)">修改</el-button>
          <el-button
            v-hasPermi="['admin:sys:dept:create']"
            size="small"
            type="text"
            icon="el-icon-plus"
            @click="handleAddSubDept(row)">新增</el-button>
            <!-- <el-button size="small" type="text" icon="el-icon-delete">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :close-on-click-modal="false" :title="dialogType === 1?'新增部门':'修改部门'" :visible.sync="dialogFormVisible" width="38%">
      <el-form ref="dialogForm" :rules="formRules" :model="dialogForm" label-width="120px">
        <el-form-item label="上级部门" prop="pid">
          <el-cascader
            v-model="dialogForm.pid"
            :options="enableList"
            :show-all-levels="false"
            :emit-path="false"
            clearable
            :props="{ checkStrictly: true,label:'name',value:'id',emitPath:false }"
            style="width: 100%;"/>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="dialogForm.name" clearable placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="sequence">
              <el-input-number v-model="dialogForm.sequence" :min="0" controls-position="right" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="状态" prop="dataStatus">
          <el-radio-group v-model="dialogForm.dataStatus">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="confirmEdit('dialogForm')">确定</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { deptList, createDept, updateDept, deptDetail } from '@/api/permission'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { listUserDept } from '@/api/permission/user'
export default {
  name: 'dept',
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        name: null
      },
      dialogFormVisible: false,
      dialogForm: {
        pid: 0
      },
      dialogType: 1,
      formRules: {
        name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
        dataStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        sequence: [{ required: true, message: '请输入显示顺序', trigger: 'blur' }]
      },
      enableList: [],
      deptList: []// 部门数据
    }
  },
  created() {
    this.getList()
    this.listUserDept()
  },
  methods: {
    listUserDept() {
      listUserDept().then(response => {
        const list = response.data || []
        this.enableList = list
      })
    },
    getList() {
      this.listLoading = true
      deptList(this.listQuery).then(response => {
        this.list = response.data || []
      })
    },
    getEnableList() {
      this.listLoading = true
      deptList({ dataStatus: 1 }).then(response => {
        this.enableList = response.data || []
      })
    },
    startAdd() {
      this.dialogForm = {
        pid: 0
      }
      this.dialogFormVisible = true
      this.dialogType = 1
      this.$nextTick(() => {
        this.$refs.dialogForm.clearValidate()
      })
    },

    confirmEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(!this.dialogForm.pid) this.dialogForm.pid = 0
          if (this.dialogType === 1) {
            createDept(this.dialogForm).then(response => {
              this.$message({
                message: '添加成功!',
                type: 'success'
              })
              this.getList()
              this.dialogFormVisible = false
              this.dialogForm = {
                pid: 0
              }
              this.getEnableList()
            })
          } else {
            updateDept(this.dialogForm).then(response => {
              this.$message({
                message: '修改成功!',
                type: 'success'
              })
              this.getList()
              this.dialogFormVisible = false
              this.dialogForm = {
                pid: 0
              }
              this.getEnableList()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleEdit(row) {
      this.dialogType = 2
      deptDetail({ id: row.id }).then(res => {
        this.dialogForm = res.data || {}
        this.dialogFormVisible = true
      })
      this.$nextTick(() => {
        this.$refs.dialogForm.clearValidate()
      })
    },
    handleAddSubDept(row) {
      this.dialogType = 1
      this.dialogForm.pid = row.id
      this.dialogFormVisible = true
    }

  }

}
</script>
